<!--&lt;!&ndash;-->
<!--<template>-->
<!--  <div class="comment-management">-->
<!--    &lt;!&ndash; 添加新评论的表单 &ndash;&gt;-->
<!--    <el-form :model="newComment" class="comment-form" ref="newCommentForm" label-width="80px">-->
<!--      <el-form-item label="评论内容" prop="content">-->
<!--        <el-input v-model=" newComment.content" placeholder="请输入评论内容" required></el-input>-->

<!--      </el-form-item>-->

<!--      <el-form-item >-->
<!--        <el-button type="primary" @click="addComment">提交评论</el-button>-->
<!--        <el-button type="success" @click="newComment.rating='good'" icon="el-icon-success" circle>好评</el-button>-->
<!--        <el-button type="warning" @click="newComment.rating='average' " icon="el-icon-star-off" circle>中评</el-button>-->
<!--        <el-button type="danger" @click="newComment.rating='bad'" icon="el-icon-error" circle>差评</el-button>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <div class="badge-container">-->
<!--          <el-badge :value="racount[0]" class="item">-->
<!--            <el-button size="small"  @click="getrating('good')">好评</el-button>-->
<!--          </el-badge>-->

<!--          <el-badge :value="racount[1]" class="item">-->
<!--            <el-button size="small"  @click="getrating('average')">中评</el-button>-->
<!--          </el-badge>-->

<!--          <el-badge :value="racount[2]" class="item">-->
<!--            <el-button size="small"  @click="getrating('bad')">差评</el-button>-->
<!--          </el-badge>-->
<!--        </div>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

<!--    &lt;!&ndash; 显示评论列表 &ndash;&gt;-->
<!-- <ul class="comment-list">-->
<!--      <li v-for="comment in comments" :key="comment.id" class="comment-item">-->
<!--        <div class="comment-wrapper">-->
<!--          &lt;!&ndash; 评论内容 &ndash;&gt;-->
<!--          <div class="comment-content">-->
<!--            <div class="avatar-wrapper">-->
<!--              <img :src="comment.avatar" alt="Avatar" class="avatar">-->
<!--            </div>-->
<!--            <div class="comment-info">-->
<!--              <div class="nickname">{{ comment.nickname }}</div>-->
<!--              <div class="comment-time" style="color: grey;">{{ new Date(comment.eduCreate).toLocaleString() }}</div>-->
<!--              <div class="content" @click="toggleReply(comment.id)">{{ comment.content }}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <br>-->
<!--          <br>-->
<!--          <ul class="reply-list" style="list-style: none;">-->

<!--            <li v-for="reply in comment.replies" :key="reply.id" style="margin-bottom: 20px;"  class="reply-item">-->
<!--              <div class="comment-content">-->
<!--                <div class="avatar-wrapper">-->
<!--                  <img :src="reply.avatar" alt="Avatar" class="avatar">-->
<!--                </div>-->
<!--                <div class="comment-info">-->
<!--                  <div class="nickname">{{ reply.nickname }}</div>-->
<!--                  <div class="comment-time" style="color: grey;">{{ new Date(reply.eduCreate).toLocaleString() }}</div>-->
<!--                  <div class="content" ><span style="color: grey;" @click="this.newComment.commentId=comment.memberId">回复&nbsp;{{comment.nickname}}:&nbsp;</span>{{ reply.content }}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </li>-->
<!--          </ul>-->
<!--          &lt;!&ndash; 回复框与按钮 &ndash;&gt;-->
<!--          <div class="reply-buttons">-->
<!--            <el-input v-model="newReply.content" v-show="comment.showReplyInput" placeholder="请输入回复内容"></el-input>-->
<!--            <el-button type="primary" @click="addReply(comment.id)" v-show="comment.showReplyInput">添加回复</el-button>-->
<!--            <el-button type="text" @click="toggleReply(comment)">回复</el-button>-->
<!--            <el-button type="text" @click="deleteComment(comment.id)">删除</el-button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </li>-->
<!--    </ul>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { getList,getseave,getupload,getone,getRating } from '@/api/comment';-->
<!--import { formatTime } from "../../utils";-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      isMine:false,//是否为当前用户是评论的作者-->
<!--      racount:[],-->
<!--      rating:null,//可以是 'good'（好评）、'average'（中评） 或者 'bad'（差评）。-->
<!--      newReply:{   // 存储新回复的内容-->
<!--        commentId:'',      //被回复的会员id-->
<!--        memberId:'',          //回复者会员ID-->
<!--        nickname:'',          //回复者昵称-->
<!--        avatar:'',            //回复者头像-->
<!--        content:'',        //回复内容-->
<!--      },-->
<!--      newComment: {    //发送评论-->
<!--        courseId:'',   //课程id-->
<!--        teacherId:'',   //讲师id-->
<!--        memberId:'',  //会员id-->
<!--        content:'',    //评论内容-->
<!--        nickname:'',//会员昵称-->
<!--        avatar:'', //会员头像-->
<!--        rating:'',  //可以是 'good'（好评）、'average'（中评） 或者 'bad'（差评）。-->
<!--      },-->
<!--      comments: [],-->
<!--      activeCommentId: null, // 存储当前处于回复状态的评论ID-->
<!--    };-->
<!--  },-->

<!--  created() {-->
<!--    this.getRatCount();-->
<!--    sessionStorage.setItem('memberId', '1106833021442510849');-->
<!--    this.getFs()-->
<!--  this.newReply.nickname='Li'  //回复者昵称-->
<!--  this.newReply.avatar="https://tse1-mm.cn.bing.net/th/id/OIP-C.ymprRS_Aaqd4yqqMWq1e6QHaHY?rs=1&pid=ImgDetMain"//回复者头像-->
<!--  this.newReply.memberId="1106833021442510849"  //当前会员id-->
<!--    this.fetchComments();-->
<!--    // 添加点击事件监听器，点击页面其他地方隐藏回复框-->
<!--    document.addEventListener('click', this.hideReplyBox);-->
<!--  },-->

<!--  destroyed() {-->
<!--    // 在组件销毁时移除点击事件监听器-->
<!--    document.removeEventListener('click', this.hideReplyBox);-->
<!--  },-->

<!--  methods: {-->
<!--    getRatCount(){-->
<!--      getRating().then(res=>{-->
<!--        if (res.code==20000){-->
<!--           this.racount=res.data.list-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    getrating(val){-->
<!--      this.rating=val-->
<!--      this.fetchComments()-->
<!--    },-->
<!--      getFs(){-->
<!--        var value = sessionStorage.getItem('memberId');-->
<!--        if (value!=null){-->
<!--          getone(value).then(res=>{-->
<!--            if (res.code==20000){-->
<!--                 this.newComment.courseId=res.data.courseId-->
<!--                 this.newComment.teacherId=res.data.teacherId-->
<!--                 this.newComment.memberId=res.data.memberId-->
<!--                 this.newComment.nickname=res.data.nickname-->
<!--                 this.newComment.avatar=res.data.avatar-->
<!--            }-->
<!--          })-->
<!--        }-->
<!--      },-->
<!--    // 切换显示回复框-->
<!--    toggleReply(row) {-->
<!--      this.newReply.commentId=row.memberId-->
<!--        // 设置当前处于回复状态的评论ID-->
<!--        this.activeCommentId =row.id;-->
<!--      this.comments = this.comments.map(comment => {-->
<!--        if (comment.id ===row.id) {-->
<!--          return { ...comment, showReplyInput: !comment.showReplyInput };-->
<!--        } else {-->
<!--          return { ...comment, showReplyInput: false };-->
<!--        }-->
<!--      });-->
<!--    },-->
<!--    // 获取评论列表-->
<!--    fetchComments() {-->
<!--      getList(this.rating).then(response => {-->
<!--        if (response.code === 20000) {-->
<!--          this.comments = response.data.records-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    // 添加回复-->
<!--    addReply(commentId) {-->
<!--     this.newReply.commentId=commentId;-->
<!--      // 调用添加回复的 API，并传入评论ID和回复内容-->
<!--      getupload(this.newReply).then(res=>{-->
<!--        if (res.code==20000){-->
<!--          this.$message.success("回复成功！")-->
<!--          this.newReply.content=""-->
<!--          this.getRatCount();-->
<!--          this.fetchComments()-->
<!--        }else{-->
<!--          this.$message.error("回复失败！")-->
<!--        }-->
<!--      })-->
<!--      // 然后刷新评论列表-->
<!--    },-->

<!--    // 删除回复-->
<!--    deleteReply(commentId, replyId) {-->
<!--      // 调用删除回复的 API，并传入评论ID和回复ID-->
<!--      // 然后刷新评论列表-->
<!--    },-->


<!--    // 添加评论-->
<!--    addComment() {-->
<!--        if (this.newComment.rating==''){-->
<!--          this.$message.error("请选择评论类型")-->
<!--        }else{-->
<!--          getseave(this.newComment).then(res=>{-->
<!--            if (res.code==20000){-->
<!--              this.$message.success("评论成功！")-->
<!--              this.newComment.content=""-->
<!--              this.newComment.rating==''-->
<!--              this.getRatCount();-->
<!--              this.fetchComments()-->
<!--            }else{-->
<!--              this.$message.error("评论失败！")-->
<!--            }-->
<!--          })-->
<!--        }-->

<!--    },-->

<!--    // 删除评论-->
<!--    deleteComment(commentId) {-->
<!--      deleteCommentApi(commentId).then(() => {-->
<!--        this.fetchComments();-->
<!--      }).catch(error => {-->
<!--        console.error('删除评论失败', error);-->
<!--      });-->
<!--    },-->



<!--    // 隐藏回复框-->
<!--    hideReplyBox() {-->
<!--      // 如果有评论处于回复状态且点击的地方不是该评论，隐藏回复框-->
<!--      if (this.activeCommentId !== null && event.target.closest('.comment-item') === null) {-->
<!--        this.comments = this.comments.map(comment => {-->
<!--          if (comment.id === this.activeCommentId) {-->
<!--            return { ...comment, showReplyInput: false };-->
<!--          } else {-->
<!--            return comment;-->
<!--          }-->
<!--        });-->
<!--        // 重置当前处于回复状态的评论ID-->
<!--        this.activeCommentId = null;-->
<!--      }-->
<!--    },-->


<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.reply-wrapper {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->

<!--.reply-buttons {-->
<!--  margin-left: auto; /* 将按钮推到右边 */-->
<!--  margin-right: 10px; /* 增加右边距 */-->
<!--}-->
<!--.reply-item {-->
<!--  background-color: #f0f0f0; /* 灰色背景色 */-->
<!--  padding: 10px;-->
<!--  border-radius: 5px;-->
<!--}-->
<!--.badge-container .item {-->
<!--  margin-right: 20px; /* 通过增加右外边距来拉开组件之间的距离 */-->
<!--}-->
<!--.comment-content {-->
<!--  display: flex;-->
<!--  align-items: center; /* 垂直居中对齐 */-->
<!--}-->

<!--.avatar-wrapper {-->
<!--  margin-right: 10px; /* 调整头像和文字之间的间距 */-->
<!--}-->
<!--.comment-management {-->
<!--  max-width: 600px;-->
<!--  margin: 0 auto;-->
<!--}-->

<!--.comment-form {-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--.comment-list {-->
<!--  list-style: none;-->
<!--  padding: 0;-->
<!--}-->

<!--.comment-item {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.avatar {-->
<!--  width: 50px;-->
<!--  height: 50px;-->
<!--  border-radius: 50%;-->
<!--  margin-right: 10px;-->
<!--}-->

<!--.comment-info {-->
<!--  flex: 1;-->
<!--}-->

<!--.nickname {-->
<!--  font-weight: bold;-->
<!--}-->

<!--.comment-actions .el-button {-->
<!--  margin-right: 5px;-->
<!--}-->
<!--.comment-item {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  padding: 10px;-->
<!--  border: 1px solid #eaeaea;-->
<!--  border-radius: 5px;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.avatar {-->
<!--  width: 50px;-->
<!--  height: 50px;-->
<!--  border-radius: 50%;-->
<!--  margin-right: 10px;-->
<!--}-->

<!--.comment-info {-->
<!--  flex: 1;-->
<!--}-->

<!--.nickname {-->
<!--  font-weight: bold;-->
<!--}-->

<!--.comment-actions .el-button {-->
<!--  margin-right: 5px;-->
<!--}-->
<!--</style>-->
<!--&ndash;&gt;-->
